<template>
	<!-- <view class="designer-avatar">
    <image :src="$wanlshop.ossYSM(designer.avatar, 80, 80, 2, 'avatar')"></image>
    <view class="level" v-if="designer.designer_level">
      <span class="text">{{ designer.designer_level }}</span>
    </view>
  </view> -->
 
	<view class="designer-avatar" :style="{width:photoWidth+'rpx',height:photoHeight+'rpx'}">
		
		<image :src="$wanlshop.ossYSM(designer.avatar, propWidth, propHeight, 2, 'avatar')"></image>
		<view class="designer_level" v-if="designer.designer_level">{{ designer.designer_level }}</view>
	</view>
</template>
<script>
	export default {
		name: 'st-avatar',
		props: {
			photoWidth:{
				typeof: [String, Number],
				default:120
			},
			photoHeight:{
				typeof: [String, Number],
				default:120
			},
			propWidth: {
				typeof: [String, Number],
				default:80
			},
			propHeight: {
				typeof: [String, Number],
				default:80
			},
			designer: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {

			}
		},
		computed: {

		},
		mounted() {

		},
		methods: {

		}
	};
</script>
<style lang='less' scoped>
	/* .designer-avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  position: relative;
  overflow: hidden;

  .level {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    background: rgba(139, 0, 0, 0.8);
    color: #fff;
    padding: 0 0 12rpx;
    text-align: center;

    .text {
      display: inline-block;
      font-size: 16rpx;
      transform: scale(0.8);
    }
  }

  image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
} */

	.designer-avatar {
		position: relative;
		border-radius: 50%;
		overflow: hidden;
		z-index: 1;

		image {
			border-radius: 50%;
			width: 100%;
			height: 100%;
		}

		.designer_level {
			position: absolute;
			z-index: 0;

			left: 0;
			bottom: 0;
			width: 100%;
			height: 40rpx;
			padding-top: 4rpx;
			font-size: 18rpx;
			text-align: center;
			background-color: rgba(196, 10, 10, 0.7);
			color: #fff;
		}
	}
</style>